import React, { useEffect, useState } from "react";

const AMapComponent = () => {
  const [map, setMap] = useState(null); // 地图实例
  const [position, setPosition] = useState(null); // 当前位置

  useEffect(() => {
    // 加载高德地图 API
    const script = document.createElement("script");
    script.src = `https://webapi.amap.com/maps?v=2.0&key=a4226cd6aeb4a21de60b671682caf167`;
    script.async = true;
    document.head.appendChild(script);

    script.onload = () => {
      // 初始化地图
      const mapInstance = new AMap.Map("map-container", {
        zoom: 13, // 初始缩放级别
        resizeEnable: true, // 允许地图自适应窗口大小
      });

      // 获取当前位置
      window.AMap.plugin("AMap.Geolocation", () => {
        const geolocation = new window.AMap.Geolocation({
          enableHighAccuracy: true, // 使用高精度定位
          timeout: 1000, // 定位超时时间
          maximumAge: 0, // 定位缓存时间
          showButton: true, // 显示定位按钮
          buttonPosition: "RB", // 定位按钮位置
          buttonOffset: new window.AMap.Pixel(10, 20), // 定位按钮偏移量
          zoomToAccuracy: true, // 定位成功后自动调整地图视野到定位点
        });

        // 浏览器定位
        geolocation.getCurrentPosition((status, result) => {
          if (status === "complete") {
            // 定位成功
            const { lng, lat } = result.position;
            setPosition([lng,lat]);
            mapInstance.setCenter([lnglat]); // 将地图中心设置为当前位置
          } else {
            // 浏览器定位失败，使用 IP 定位
            console.warn("浏览器定位失败，尝试使用 IP 定位");
            window.AMap.plugin("AMap.CitySearch", () => {
              const citySearch = new window.AMap.CitySearch();
              citySearch.getLocalCity((status, result) => {
                if (status === "complete" && result.bounds) {
                  const { lng, lat } = result.bounds.getCenter();
                  setPosition([lng, lat]);
                  mapInstance.setCenter([lng, lat]); // 将地图中心设置为 IP 定位结果
                } else {
                  console.error("IP 定位失败", result);
                }
              });
            });
          }
        });
      });

      setMap(mapInstance);

    };

    return () => {
      document.head.removeChild(script);
    };
  }, []);

  return (
    <>
      <div
        id="map-container"
        style={{
          width: "100%", // 宽度为满屏幕
          height: "50vh", // 高度为屏幕的 50%
        }}
      ></div>
    </>
  );
};

export default AMapComponent;
